<template>
  <div class="divBox">
    <el-tabs v-if="headeNum.length > 0" v-model="type" @tab-click="setType()">
      <el-tab-pane v-for="(item,index) in headeNum" :key="index" :name="item.type.toString()" :label="item.title"/>
    </el-tabs>
    <el-card class="box-card" v-if="type=='1'">
      <div slot="header" class="clearfix">
        <el-button size="small" type="primary" @click="onAdd">添加会员</el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column label="ID" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.user_brokerage_id }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.brokerage_name }}
            </div>

          </template>
        </el-table-column>

        <el-table-column label="人数" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.user_num }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="等级图标" min-width="100">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px"
                        :src="scope.row.brokerage_icon ? scope.row.brokerage_icon : ''"
                        :preview-src-list="[scope.row.brokerage_icon || '']"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="所需成长值" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.brokerage_rule.value }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="创建时间" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="onEdit(scope.row.user_brokerage_id)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row.user_brokerage_id, scope.$index)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-card class="box-card" v-if="type=='2'">
      <div class="top">
        <el-radio-group
          v-model="applyFrom.apply_status"
          type="button"
          class=" mb20 selWidth"
          size="small"
          @change="selectStatusTpte(applyFrom.apply_status)"
        >
          <el-radio-button
            v-for="(item,i) in examineList.fromTxt"
            :key="i"
            :label="item.val"
          >{{ item.text }}
          </el-radio-button>
        </el-radio-group>
        <el-input
          v-model="applyFrom.search_text"
          @keyup.enter.native="getApplyList()"
          placeholder="请输入姓名/手机号查询"
          class="selWidth mb20"
          size="small"
        >
          <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getApplyList()"/>
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="applyData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column label="ID" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.id }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.phone }}
            </div>

          </template>
        </el-table-column>

        <el-table-column label="创建时间" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.apply_status==0">
              未审核
            </div>
            <div v-if="scope.row.apply_status==1">
              审核通过
            </div>
            <div v-if="scope.row.apply_status==2">
              审核失败
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.fail_msg }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="examine(scope.row.id)" :disabled="scope.row.apply_status!=0">审核</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="applyData.limit"
          :current-page="applyData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="applyData.total"
          @size-change="handleSizeChangeApply"
          @current-change="pageChangeApply"
        />
      </div>

    </el-card>
    <el-card class="box-card" v-if="type=='3'">
      <div class="top">
        <el-radio-group
          v-model="applyFrom.apply_status"
          type="button"
          class=" mb20 selWidth"
          size="small"
          @change="selectStatusTpte(applyFrom.apply_status)"
        >
          <el-radio-button
            v-for="(item,i) in examineList.fromTxt"
            :key="i"
            :label="item.val"
          >{{ item.text }}
          </el-radio-button>
        </el-radio-group>
        <el-input
          v-model="applyFrom.search_text"
          @keyup.enter.native="getApplyList()"
          placeholder="请输入姓名/手机号查询"
          class="selWidth mb20"
          size="small"
        >
          <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getApplyList()"/>
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="applyData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column label="ID" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.id }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.phone }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="头像" min-width="100">
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image style="width: 36px; height: 36px"
                        :src="scope.row.coach_avatar ? scope.row.coach_avatar.split(',')[0] : ''"
                        :preview-src-list="scope.row.coach_avatar.split(',') || []"/>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="地址" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.address }}
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="synopsis" label="个人介绍" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.synopsis }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="申请时间" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.apply_status==0">
              未审核
            </div>
            <div v-if="scope.row.apply_status==1">
              审核通过
            </div>
            <div v-if="scope.row.apply_status==2">
              审核失败
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.fail_msg }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="examine(scope.row.id)" :disabled="scope.row.apply_status!=0">审核</el-button>

          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="applyData.limit"
          :current-page="applyData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="applyData.total"
          @size-change="handleSizeChangeApply"
          @current-change="pageChangeApply"
        />
      </div>

    </el-card>
    <el-card class="box-card" v-if="type=='4'">
      <div class="top">
        <el-radio-group
          v-model="applyFrom.apply_status"
          type="button"
          class=" mb20 selWidth"
          size="small"
          @change="selectStatusTpte(applyFrom.apply_status)"
        >
          <el-radio-button
            v-for="(item,i) in examineList.fromTxt"
            :key="i"
            :label="item.val"
          >{{ item.text }}
          </el-radio-button>
        </el-radio-group>
        <el-input
          v-model="applyFrom.search_text"
          @keyup.enter.native="getApplyList()"
          placeholder="请输入姓名/手机号查询"
          class="selWidth mb20"
          size="small"
        >
          <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getApplyList()"/>
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="applyData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column label="ID" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.id }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.phone }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="导师名称" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.coach.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="导师手机号" min-width="100">

          <template slot-scope="scope">
            <div>
              {{ scope.row.coach.phone }}
            </div>
          </template>

        </el-table-column>
        <el-table-column label="导师简介" min-width="100">

          <template slot-scope="scope">
            <div>
              {{ scope.row.coach.synopsis }}
            </div>
          </template>

        </el-table-column>
        <el-table-column label="申请时间" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.apply_status==0">
              未审核
            </div>
            <div v-if="scope.row.apply_status==1">
              审核通过
            </div>
            <div v-if="scope.row.apply_status==2">
              审核失败
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.fail_msg }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="examine(scope.row.id)" :disabled="scope.row.apply_status!=0">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="applyData.limit"
          :current-page="applyData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="applyData.total"
          @size-change="handleSizeChangeApply"
          @current-change="pageChangeApply"
        />
      </div>
    </el-card>

    <el-card class="box-card" v-if="type=='5'">


      <div class="top">
        <el-radio-group
          v-model="agencyFrom.status"
          type="button"
          class=" mb20 selWidth"
          size="small"
          @change="selectAgentTpte(agencyFrom.status)"
        >
          <el-radio-button
            v-for="(item,i) in examineList.fromTxt"
            :key="i"
            :label="item.val"
          >{{ item.text }}
          </el-radio-button>
        </el-radio-group>
        <el-input
          v-model="agencyFrom.keyword"
          @keyup.enter.native="getAgentList()"
          placeholder="请输入姓名/手机号查询"
          class="selWidth"
          size="small"
        >
          <el-button slot="append" icon="el-icon-search" size="small" class="el-button-solt" @click="getAgentList()"/>
        </el-input>
      </div>
      <el-table
        v-loading="listLoading"
        :data="agentData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column label="ID" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.id }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="名称" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="手机号" min-width="60">
          <template slot-scope="scope">
            <div>
              {{ scope.row.phone }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="代理区域" min-width="150">
          <template slot-scope="scope">
            <div>
              {{ scope.row.agent_area }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="申请时间" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.create_time }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="100">
          <template slot-scope="scope">
            <div v-if="scope.row.status==0">
              未审核
            </div>
            <div v-if="scope.row.status==1">
              审核通过
            </div>
            <div v-if="scope.row.status==2">
              审核失败
            </div>
          </template>
        </el-table-column>
        <el-table-column label="备注" min-width="100">
          <template slot-scope="scope">
            <div>
              {{ scope.row.fail_msg }}
            </div>

          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="100" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="examine(scope.row.id)" :disabled="scope.row.status!=0">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="applyData.limit"
          :current-page="applyData.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="applyData.total"
          @size-change="handleSizeChangeApply"
          @current-change="pageChangeApply"
        />
      </div>
    </el-card>
    <el-dialog
      title="修改审核状态"
      :visible.sync="show"
      width="600px"

    >
      <el-form :model="form" ref="form">
        <el-form-item
          label="审核状态"
          label-width="300px"
          prop="name"
        >
          <el-select
            @change="pickDepartment2"
            v-model="form.name"
            placeholder="请选择审核状态"
          >
            <el-option
              v-for="item in options"
              :key="item.status"
              :label="item.name"
              :value="item.status"
            >
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item
          label="备注"
          label-width="300px"
          v-if="form.status=='2'"
        >
          <el-col :span="18">
            <el-input v-model="form.fail_msg"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sureDia('form')">提 交</el-button>
        <el-button @click="cancelDia('form')">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
  interestsLstApi,
  addInterestsApi,
  interestsUpdateApi,
  interestsDeleteApi,
  applyList,
  applyAudit,
  agentList
} from "@/api/user";
import {examineList} from "@/libs/constants";

export default {
  name: "Classify",
  data() {
    return {
      form: {
        id: '',
        status: '',
        fail_msg: ''
      },
      examineList: examineList,
      options: [
        {
          status: 1,
          name: '同意'
        }, {
          status: 2,
          name: '拒绝'
        }
      ],
      show: false,
      type: '1',
      headeNum: [
        {type: 1, title: "会员列表"},
        {type: 2, title: "创客审核列表"},
        {type: 3, title: "导师审核列表"},
        {type: 4, title: "更换导师审核列表"},
        {type: 5, title: "代理审核列表"},
      ],
      tableData: {
        data: [],
        total: 0
      },
      applyData: {
        data: [],
        total: 0
      },
      agentData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 20,
        keyword: ""
      },
      agencyFrom: {
        page: 1,
        limit: 20,
        status: null,
        keyword: ""
      },
      applyFrom: {
        page: 1,
        limit: 20,
        search_text: "",
        apply_type: 1,
        apply_status: null
      },
      listLoading: true
    };
  },
  mounted() {
    this.getList();

  },
  methods: {
    //会员列表
    getList() {
      this.listLoading = true;
      interestsLstApi(this.tableFrom)
        .then(res => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    // 审核类型选择
    selectStatusTpte(tab) {
      this.applyFrom.apply_status = tab
      this.timeVal = []
      this.applyFrom.page = 1;
      this.getApplyList()
      // this.getStatisticalData()
    },
    selectAgentTpte(tab){
      this.agencyFrom.status = tab
      this.timeVal = []
      this.agencyFrom.page = 1;
      this.getAgentList()
    },
    //审核列表
    getApplyList() {
      this.listLoading = true;
      applyList(this.applyFrom)
        .then(res => {
          console.log(res)
          this.applyData.data = res.data.list;
          this.applyData.total = res.data.count;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },

    //获取代理审核列表
    getAgentList() {
      this.listLoading = true;
      agentList(this.agencyFrom)
        .then(res => {
          console.log(res)
          this.agentData.data = res.data.list;
          this.agentData.total = res.data.count;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    examine(id) {

      this.show = true
      // this.$refs['form'].resetFields();
      this.form.id = id
      console.log(id)
    },
    sureDia(forms) {
      this.listLoading = true;
      console.log(this.form)
      if (this.type == '5') {
        this.form.type = 1
      }
      applyAudit(this.form)
        .then(res => {
          console.log(res)
          this.$message.success(res.message);
          this.listLoading = false;
          this.$refs[forms].resetFields();
          this.show = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    cancelDia(form) {
      this.$refs[form].resetFields();
      this.show = false;
    },

    pickDepartment2(val) {
      console.log(val)
      this.form.status = val;
    },

    setType() {
      this.tableData = {}
      this.applyData = {}
      console.log(this.type)
      switch (this.type) {
        case '2' :
          this.applyFrom.apply_type = 1
          break;
        case '3' :
          this.applyFrom.apply_type = 2
          break;
        case '4' :
          this.applyFrom.apply_type = 3
          break;
      }
      if (this.type != '1') {
        if (this.type != '5') {
          this.getApplyList();
        } else {
          this.getAgentList();
        }
      } else {
        this.getList()
      }

    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList();
    },
    pageChangeApply(page) {
      this.applyFrom.page = page;
      this.getApplyList();
    },
    handleSizeChangeApply(val) {
      this.applyFrom.limit = val;
      this.getApplyList();
    },
    // 添加
    onAdd() {
      this.$modalForm(addInterestsApi()).then(() => this.getList())
    },
    // 编辑
    onEdit(id) {
      this.$modalForm(interestsUpdateApi(id)).then(() => this.getList())
    },
    // 删除
    handleDelete(id, idx) {
      this.$modalSure('删除该会员').then(() => {
        interestsDeleteApi(id).then(({message}) => {
          this.$message.success(message)
          this.tableData.data.splice(idx, 1)
        }).catch(({message}) => {
          this.$message.error(message)
        })
      })
    }
  }
};
</script>

<style scoped lang="scss">
.top {
  display: flex;
  flex-direction: column;
}

.mb20 {
  margin-bottom: 20px;
}
</style>
